<template>
	<view class="">
		<NavBar title="订单" :isShowLeftBtn="false">
		</NavBar>
	</view>
	<!-- 	<view class="search_box " style="padding-top: 20rpx;">
		<view class="search_input" :style="searchVal?{width:'710rpx'}:{paddingLeft:'46rpx',width:'666rpx'}">
			<view class="">
				<view class="search_icon" v-if="!searchVal">
					<up-icon name="search" color="#7E7D7D" size="18"></up-icon>
				</view>
				<view class="" style="">
					<up-input placeholder="请输入关键字" border="none" v-model="searchVal" inputAlign="center"
						fontSize="24rpx" @change="onSearchChage"></up-input>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="height: 106rpx;background: #F2F2F2;">
	</view> -->
	<view class="content" :style="{height:contentHeight}">
		<view class="main">
			<view class="main_action m_b_40">
				<view :class="['main_action_item','m_r_14',activeIndex == index?'main_action_active_item':'']"
					v-for="(item,index) in tabList" :key="index" @click="onClickAtionItem(item,index)">
					<text class="text f_30_0">
						{{item.label}}
					</text>
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{height: viewHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list" v-if="orderList.length>0">
					<view class="main_item m_b_26" v-for="(item,index) in orderList" :key="index"
						@click="onClickOrderItem(item)">
						<view class="">
							<view class="" style="width: 620rpx;">
								<text class="f_26_0 u-line-1">
									订单编号：{{item.order_no}}
								</text>
							</view>
							<view class="" style="width: 620rpx;">
								<text class="f_26_0">
									送货地址：{{item.delivery_address}}
								</text>
							</view>
							<view class="" style="width: 620rpx;">
								<text class="f_26_0 u-line-1">
									收货联系人：{{item.contact_name}}
								</text>
							</view>
							<view class="" style="width: 620rpx;">
								<text class="f_26_0 u-line-1">
									联系电话：{{item.contact_phone}}
								</text>
							</view>
						</view>
						<view class="hr m_t_20 m_b_14">

						</view>
						<view class="">
							<text class="f_26_0" style="color: #8C8E91;" v-if="item.orderStatus == '订单完成'">
								{{item.orderStatus}}
							</text>
							<text class="f_26_0" style="color: #FD1122;" v-else>
								{{item.orderStatus}}
							</text>
						</view>
						<view class="flex_both">
							<view class="">

								<text class="f_24_0">下单日期：{{item.create_time}}</text>
							</view>
							<view class="">
								<text class="f_26_0" style="color: #3665FF;">
									查看更多 >
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&orderList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
	</view>
	<Tabbar :activeTab="1"></Tabbar>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	import Tabbar from "@/components/tabbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const viewHeight = ref('')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76 + 100 }rpx - env(safe-area-inset-bottom))`
				viewHeight.value = `calc(100vh - ${statusBarHeight.value + 76 + 100 + 68}rpx - env(safe-area-inset-bottom))`
			}
		});
	})
	onShow(() => {
		initList()
	})
	const initList = () => {
		loadMessage.value = '加载中'
		page.value = 1
		orderList.value = []
		getOrderList()
	}
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getOrderList()
		}, 1000)
	}
	// 顶部tab
	const tabList = ref([
		{ label: '已完成', index: 0, type: 20 },
		{ label: '进行中', index: 1, type: 21 },
	])
	const activeType = ref(20)
	const activeIndex = ref(0)
	const onClickAtionItem = (e, index) => {
		activeType.value = e.type
		activeIndex.value = index
		initList()
	}
	const orderList = ref([])
	const getOrderList = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('salesMan.getOrderList', { page: page.value, type: activeType.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				orderList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	const onClickOrderItem = (e) => {
		uni.navigateTo({
			url: `/pages/finance/historyDetail?id=${e.id}`
		})
	}

	const searchVal = ref('')
	const timer = ref(null)
	const onSearchChage = (e) => {
		searchVal.value = e
		loadMessage.value = "加载中"
		page.value = 1
		orderList.value = []
		if (timer.value) {
			clearTimeout(timer.value)
		}
		timer.value = setTimeout(() => {
			getOrderList()
		}, 200)
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_action {
				display: flex;
				align-items: center;

				.main_action_item {
					width: 167rpx;
					height: 69rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						color: #000000;
					}
				}

				.main_action_active_item {
					width: 166rpx;
					height: 68rpx;
					background: #3665FF;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						color: #FFFFFF;
					}
				}
			}

			.main_list {
				.main_item {
					width: 654rpx;
					padding: 28rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 10rpx;
					border: 1px solid #EDEDEE;
				}
			}
		}

	}

	.search_box {
		width: 750rpx;
		height: 66rpx;
		background: #F2F2F2;
		position: fixed;

		.search_input {
			padding: 11rpx 0;
			margin-left: 20rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
			border-radius: 34rpx;
			position: relative;


			.search_icon {
				position: absolute;
				left: 260rpx;
				top: 16rpx;
			}
		}
	}
</style>